/**
 * These styles are for the new Info panel on the right of the Cloud Drive when Info is selected on a folder/file.
 *
 * File manager layout changes if class folder-file-info-panel is added to the body tag.
 * NB: Based on a fixed panel width of 320px.
 */
 :root {
    --info-panel-space: var(--flyout-width);
}

/* Media viewer with info panel */
.info-panel-visible .media-viewer-container {
    width: calc(100% - var(--flyout-width));
    min-width: calc(768px - var(--flyout-width));
}
.info-panel-visible .media-viewer button.gallery-btn.next {
    right: var(--info-panel-space);
    transition: none;
}
.info-panel-visible .media-viewer .play-pause-video-button {
    left: calc(50% - 195px);
}
.info-panel-visible .media-viewer .play-video-button {
    left: calc(50% - 200px);
}
.info-panel-visible .media-viewer .watch-again-button {
    left: calc(50% - 228px);
}

/* Call with info panel */
.info-panel-visible .meetings-call,
.info-panel-visible .in-chat .stream-controls,
.info-panel-visible .in-chat .stream-head {
    width: calc(100% - var(--flyout-width));
}

/* Main styles for the folder/file Info panel */
.info-panel-block {
    padding: 8px 24px;
}
.info-panel-block.info-block-margin {
    margin-bottom: 16px;
}
.info-panel-block .info-mime {
    background: var(--mobile-surface-1);
    border-radius: 8px;
    padding: 32px 87px;
    --icon-size: 96px;
}
.info-panel-block .info-mime > i {
    position: relative;
}
.info-panel-block .info-image {
    height: 160px;
    object-fit: cover;
    object-position: center;
    width: 272px;
}
.info-panel-block .info-label {
    color: var(--mobile-text-primary);
    font: var(--mobile-font-caption-large-semibold);
}
.info-panel-block .info-label .label-tag-optional {
    color: var(--mobile-text-secondary);
    font: var(--mobile-font-caption-large-regular);
    margin-inline-start: 4px;
}
.info-panel-block .info-text,
.info-panel-block .info-versions {
    color: var(--mobile-text-secondary);
    font: var(--mobile-font-caption-small-regular);
    word-wrap: break-word;
}
.info-panel-block.taken-down .info-text {
    color: var(--secondary-red);
    font: var(--mobile-font-caption-small-semibold);
}
.info-panel-block.taken-down .info-text i {
    margin-inline-end: 4px;
}
.info-panel-block .info-badge {
    display: flex;
    align-items: center;
}
.info-panel-block .info-badge.share-perms {
    color: var(--mobile-text-secondary);
    font: var(--mobile-font-caption-small-regular);
}
.info-panel-block .info-badge.share-perms i {
    margin-inline-end: 8px;
}
.info-panel-block .info-badge.dc-badge-status span.percs {
    display: flex;
}
.info-panel-block .info-badge.dc-badge-status i {
    margin-inline-end: 4px;
}
.info-panel-block .info-badge.dc-badge-status.inactive,
.info-panel-block .info-badge.dc-badge-status.error,
.info-panel-block .info-badge.dc-badge-status.attention {
    color: var(--mobile-text-error);
}
.info-panel-block .info-badge.dc-badge-status.success {
    color: var(--mobile-text-success);
}
.info-panel-block .info-badge.dc-badge-status.updating {
    color: var(--mobile-text-info);
}
.info-panel-block .info-badge.dc-badge-status.warning {
    color: var(--mobile-text-warning);
}
.info-panel-block .info-badge.dc-badge-status i.tip-icon {
    --mask-color: var(--mobile-icon-secondary);
}
.info-panel-block .info-badge.dc-badge-status i.tip-icon:hover {
    --mask-color: var(--mobile-icon-primary);
}
.info-panel-block .info-users {
    color: var(--mobile-text-secondary);
    display: flex;
    font: var(--mobile-font-caption-small-regular);
}
.info-panel-block .info-users .info-user-name {
    margin-inline-start: 8px;
    line-height: 16px;
}
.info-panel-block .mega-node.user.info-users .users-count span {
    color: var(--mobile-text-secondary);
}
.info-panel-block .info-users.overlap .avatar:not(.users-count) {
    overflow: visible;
    max-width: calc(var(--avatar-size) - 4px);
}
.info-panel-block .info-path {
    display: flex;
    flex-wrap: wrap;
}
.info-panel-block .info-path a,
.info-panel-block .info-versions button {
    border: none;
    cursor: pointer;
    height: auto;
    padding: 0;
    text-decoration: none;
    line-height: 16px;
    max-width: 100%;
}
.info-panel-block .info-path a .text-box-wrapper {
    max-width: 100%;
}
.info-panel-block .info-path a span.primary-text,
.info-panel-block .info-versions button span.primary-text {
    color: var(--mobile-link-primary);
    font: var(--mobile-font-caption-small-regular);
    word-wrap: break-word;
}
.info-panel-block .info-path i {
    margin: 0 4px;
}
.info-panel-block .info-takedown {
    background: var(--surface-light-red);
    border: 1px solid var(--secondary-red);
    border-radius: 5px;
    color: var(--secondary-red);
    padding: 5px;
    text-align: center;
}
.info-panel-block .mega-component.text-area-scroll textarea,
.info-panel-block .mega-component.text-area-scroll textarea::placeholder {
    font: var(--mobile-font-caption-large-regular);
}
.info-panel-block .info-input-subtext {
    text-align: end;
    width: 100%;
}
.info-panel-block .info-input-subtext.read-only {
    text-align: start;
}
.info-panel-block .pm.mega-input.tags-input {
    height: 36px;
    padding: 0 4px;
}
.info-panel-block .pm.mega-input.tags-input input {
    font: var(--mobile-font-caption-large-regular);
    padding: 0;
}
.info-panel-block .pm.mega-input.tags-input input::placeholder {
    font: var(--mobile-font-caption-large-regular);
}
.info-panel-block .error-wrap {
    color: var(--mobile-text-error);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.info-panel-block .error-wrap i {
    margin-inline-end: 8px;

}
.info-panel-block .info-tags-holder {
    display: flex;
    flex-wrap: wrap;
}
.info-panel-block .info-tag {
    align-items: center;
    box-sizing: border-box;
    color: var(--mobile-text-primary);
    display: flex;
    font: var(--mobile-font-caption-large-regular);
    padding: 4px 12px;
    border-radius: 16px;
    background: var(--mobile-surface-2);
    margin-top: 8px;
    margin-inline-end: 8px;
    max-width: 100%;
}
.info-panel-block .info-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info-panel-block .info-tag i {
    cursor: pointer;
    margin-inline-start: 8px;
}
.mega-component.menu-container.overlay-wrap.info-tags-menu {
    padding: 0;
    min-width: 270px;
}
.info-tags-menu .info-tag-prompt {
    font: var(--mobile-font-caption-large-regular);
    padding: 0 24px;
}
.info-tags-menu .info-tags-dropdown-button {
    height: 58px;
    justify-content: flex-start;
    margin-inline: 16px;
    padding: 20px 8px;
    width: calc(100% - 32px);
}
.info-tags-menu .info-tags-dropdown-button:hover {
    background: var(--mobile-surface-1);
}
.info-tags-menu .info-tags-dropdown button:first-of-type {
    margin-top: 8px;
}
.info-tags-menu .info-tags-dropdown button:last-of-type {
    margin-bottom: 8px;
}
.info-tags-menu .info-tags-dropdown hr {
    margin: 0;
    background-color: var(--mobile-border-strong);
}
.info-tags-menu.menu-container .nav-elem.button .text-box-wrapper {
    overflow: hidden;
}
.info-tags-menu.menu-container .nav-elem.button span.primary-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
